<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="ElementUI/index.css">
</head>
<body>
<div id="app">

<!--
表单校验
    1、需要先定义规则，
            1.1、在data里面定义myrules
            1.2、el-form-item 加属性prop="就是当前要校验的字段名称"
            1.3、在el-form上面要加一个属性 :model="表单数据对象" 就是下面表单里面的form
            1.4、在myrules里面写规则

    2、然后调用表单校验的方法
-->
    <el-form :rules="myrules" :model="form">
        <el-form-item label="活动名称" prop="name">
            <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="性别">
            <el-select v-model="form.sex" prop="sex">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
            </el-select>
        </el-form-item>


        <el-form-item label="喜欢的食物">
            <el-checkbox label="馒头" v-model="form.food"></el-checkbox>
            <el-checkbox label="包子" v-model="form.food"></el-checkbox>
            <el-checkbox label="饺子" v-model="form.food"></el-checkbox>
            <el-checkbox label="米饭" v-model="form.food"></el-checkbox>
        </el-form-item>


        <el-button type="primary" v-on:click="save">提交</el-button>
    </el-form>

</div>

<!-- 引入组件库 -->
<script src="ElementUI/vue.js"></script>
<script src="ElementUI/index.js"></script>
<script>
    new Vue({
        el:"#app",//告诉Vue它现在控制的区域在哪里
        data:{
            form:{
                food:[]
            },
            myrules:{
                name:[
                    { required: true, message: '请输入活动名称', trigger: 'blur' },
                    {
                        validator:(rule,value,callback)=>{
                            //value 就是当前输入框的值
                            //callback 是一个回调方法，如果校验通过调用callback()不用传提示信息，反之把错误信息传入
                            if(value == "爸爸"){
                                callback();
                            } else {
                                callback("叫爸爸");
                            }

                        }
                    }
                ]
            }
        },
        methods:{
            save(){
                console.log(this.form);
            }
        }
    })


</script>
</body>
</html>
